<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <canvas id= "canvas1" width = "400" height= "400"
                style="border:solid" tabindex="0"></canvas>
        <div style="border:solid;backfround-color: red; color:blue;">
            <span>Pontos:</span>
            <input type="text" id="txtpontos"/><br/>
            <span>Vidas:</span>
            <input type="text" id="txtvidas"/><br/>
        </div>
         <audio src="Timber.mp3" id ="som" ></audio>
        <form>

            <input type="button" value="esquerda" onclick="mover('E');"/>
            <input type="button" value="direita" onclick="mover('D');"/>
            <input type="button" value="cima" onclick="mover('C');"/>
            <input type="button" value="baixo" onclick="mover('B');"/>
        </form>

        <script language="javascript">
                var ctx1 = document.getElementById('canvas1').getContext("2d");

                var x, y, largura, altura, intervalo, velocidade = 50, pontos, vida;
                var comidax, comiday, comidalargura, comidaaltura;
                var jogando;
                var cores = ["#FF4500", "#FFD700", "pink"];
                var icores = 0;
                document.addEventListener("DOMContentLoaded", iniciaeventos, false);

                
    function inicia() {
                som.pause();
           
                 jogando = true;
                    x = 5;
                    y = 5;
                    largura = 50;
                    altura = 50;
                    passo = 5;
                    comidax = 100;
                    comiday = 100;
                    comidaaltura = 20;
                    comidalargura = 20;
                    velocidade = 30;
                    document.getElementById('canvas1').focus();
                    pontos = 0;
                    vida = 5;
                    txtpontos.value = pontos;
                    txtvidas.value = vida;
                    ctx1.clearRect(0, 0, 400, 400);
                   
                    desenha();
                    desenhacomida();
                }

                function iniciaeventos()
                {
                    document.getElementById('canvas1').addEventListener("keydown", tec, false);
                }

                function tec(e)
                {
        if (e.keyCode == '13'){
            inicia ();
            return;
        }  
        if (jogando) {
                        if (e.keyCode == '37') {
                            mover('E');

                        }
                        else if (e.keyCode == '38') {
                            mover('C');

                        } else if (e.keyCode == '39') {
                            mover('D');

                        }
                        else if (e.keyCode == '40') {
                            mover('B');

                        }else if (e.keyCode == '32'){
                            alert (e.keyCode);
                            mover ('P')
                            
                        }
                        
                    }
                }


                function mover(direcao) {
                    clearInterval(intervalo);
                    switch (direcao) {
                        case 'D':
                            intervalo = setInterval(moverDireita, velocidade);
                            break;
                        case 'E':
                            intervalo = setInterval(moverEsquerda, velocidade);
                            break;
                        case 'C':
                            intervalo = setInterval(moverCima, velocidade);
                            break;
                        case 'B':
                            intervalo = setInterval(moverBaixo, velocidade);
                            break;
                        case 'P':
                        break;

                    }
                }
                function limpaTela() {
                    ctx1.clearRect(x, y, largura, altura);
                }
                function moverEsquerda() {

                    if (x > 0) {
                        limpaTela();
                        x = x - passo;
                        verificaComida();
                        desenha();
                    } else {
                        tiravida();
                    }

                }
                function moverDireita() {
                    if (x < (400 - largura)) {


                        limpaTela();
                        x = x + passo;
                        verificaComida();
                        desenha();
                    } else {
                        tiravida();
                    }
                }
                function moverCima() {

                    if (y > 0) {
                        limpaTela();
                        y = y - passo;
                        verificaComida();
                        desenha();
                    } else {
                        tiravida();
                    }
                }
                function moverBaixo() {
                    if (y < (400 - largura)) {
                        limpaTela();
                        y = y + passo;
                        verificaComida();
                        desenha();
                    } else {
                        tiravida();
                    }
                }
                function verificaComida()
                {


                    if ((comidax + (comidalargura / 2)) >= x &&
                            (comidax + (comidalargura / 2)) <= (largura + x)
                            && (comiday + (comidaaltura / 2)) >= y &&
                            (comiday + (comidaaltura / 2)) <= (altura + y))
                    {

                        level();
                        comidax = Math.floor(
                                (Math.random() *
                                        (396 - comidalargura)));
                        comiday = Math.floor(
                                (Math.random() *
                                        (396 - comidaaltura)));
                        comidax = comidax + 2;
                        comiday = comiday + 2;

                        desenhacomida();
                    }
                }


                function desenha() {
                    var img = new Image();

                    img.src = "face.jpg";
                    img.onload = function() {
                        ctx1.drawImage(img, x, y);
                    };
                }
                function desenhacomida() {
                    var img = new Image();

                    img.src = "comida.jpg";
                    img.onload = function() {
                        ctx1.drawImage(img, comidax, comiday);
                    };
                }

                function tiravida() {
                    
                    vida = vida - 1;
                    clearInterval(intervalo);
                    txtvidas.value = vida;
                    if (vida == 0) {
                        ctx1.fillStyle = "red";
                        ctx1.font="50px sans-serif";
                        ctx1.fillText("Perdeu Playboy",50,200);
                        jogando = false;
                        som.play();
                    }
                }
                function level() {
                    pontos = pontos + 1;

                    txtpontos.value = pontos;

                    if ((pontos % 10) == 0) {
                        velocidade = velocidade - 10;
                    }
                    if ((pontos % 15) == 0) {

                        ctx1.fillStyle = cores[icores];
                        icores++;
                    }
                }
                
                    inicia();
                
                  
                  


        </script>
    </body>
</html>
